
import React, { useState, useRef } from 'react'
// import './index.less'
import { Form, Collapse } from 'antd'
const { Panel } = Collapse

import { uuid } from '@/common/utils'

import SchemaFormReader, { SchemaTypeItem } from '@/components/SchemaFormReader'

import FormDemo from './components/FormDemo'

function index() {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const [loading, setLoading] = useState(false)

  const parentFormRef: any = useRef()
  const formInitialValues: any = {}
  const schemaArr:SchemaTypeItem[] = [
    {
      key: uuid(5), // 该组的别名/code
      title: '卡槽', // 该组的名称
      index: 1, // 索引
      row: { // 表单全局删格布局的行属性，优先级低于list里的行属性设置
        gutter: [20, 20], // 每列上下间距
        align: 'top', // 垂直对齐方式
        justify: 'start', // 水平排列方式
        prefixCls: '', // 自定义类名
        wrap: true // 是否自动换行
      },
      // 表单里的字段fieldName都必须唯一，不可重复。
      list: [ // 表单字段列表，里面异步获取数据的接口action不能重复必须具有唯一性。
        {
          rules: [{ required: true, message: '此为必填项!' }], // 校验正则
          key: uuid(5),
          fieldName: 'slotType', // 字段名称
          widget: 'Select', // 微件名称
          value: '', // 初始值
          status: 'edit', // 表单项字段状态 edit（默认）：编辑,disabled：禁用,preview：预览,hidden：隐藏
          options: {
            action: '/mock/find/slotType', // 查询选择的类型
            method: 'POST',
            search: {'keyWord': 'name'}, // 是否搜索，name 为自定义的对应的入参名
            params: {name: 'test'}, // 有依赖监听watch场景下，会根据watch里的字段去取值放入放入data里进行合并，这里最终效果为：params: {name:'test',slotType:1}
            headers: {},
            jsonp: false
          },
          ui: { // 删格列col,表单项formitem 的配置属性
            label: '插槽类型', // 表单项左边文字描述
            tooltip: { title: '你选择对应的插槽类型!' },
            colSpan: 8,
            labelCol: { span: 8, offset: 0 },
            wrapperCol: { span: 16, offset: 0 }
          },
          props: { // 微件的配置属性
            'placeholder': '请输入'
          },
          index: 1 // 该字段所在索引
        },
        {
          rules: [{ required: true, message: '此为必填项!' }], // 校验正则
          key: uuid(5),
          fieldName: 'price', // 字段名称
          widget: 'InputNumber', // 微件名称
          value: '', // 初始值
          status: 'edit',
          ui: { // 删格列col,表单项formitem 的配置属性
            label: '单价', // 表单项左边文字描述
            colSpan: 8,
            labelCol: { span: 8, offset: 0 },
            wrapperCol: { span: 16, offset: 0 }
          },
          props: {},
          listeners: [
            {
              watch: ['slotType'],
              // 逻辑运算符：||（或），&&（与），!（非）
              condition: [
                {
                  fieldName: 'slotType',
                  value: 'undefined', // 代表空
                  operator: '!==',
                  connector: '||'
                }
              ],
                // "allowCustom.value = true || slotType.value != ''", // value 代表监听字段的值
              set: { // 设置当前schema对象的值
                value: 'slotType.value.price' // 表示：slotType下拉字段的当前选择值里面去取price值
              }
            }
          ],
          index: 2 // 该字段所在索引
        },
        {
          rules: [{ required: true, message: '此为必填项!' }], // 校验正则
          key: uuid(5),
          fieldName: 'allowCustom', // 字段名称
          widget: 'Switch', // 微件名称
          value: '', // 初始值
          status: 'edit',
          ui: { // 删格列col,表单项formitem 的配置属性
            label: '是否支持外接', // 表单项左边文字描述
            colSpan: 8,
            labelCol: { span: 8, offset: 0 },
            wrapperCol: { span: 16, offset: 0 }
          },
          props: {},
          index: 3 // 该字段所在索引
        },
        {
          rules: [{ required: true, message: '此为必填项!' }], // 校验正则
          key: uuid(5),
          fieldName: 'externalType', // 字段名称
          widget: 'Select', // 微件名称
          value: '', // 初始值
          status: 'hidden',
          options: {
            action: '/mock/find/externalType', // 查询选择的类型
            method: 'POST',
            watch: ['slotType'],
            search: {'keyWord': 'name'}, // 是否搜索，name 为自定义的对应的入参名
            params: {name: 'test'}, // 有依赖监听watch场景下，会根据watch里的字段去取值放入放入data里进行合并，这里最终效果为：params: {name:'test',slotType:1}
            headers: {},
            jsonp: false
          },
          ui: { // 删格列col,表单项formitem 的配置属性
            label: '外接类型', // 表单项左边文字描述
            tooltip: { title: '你选择对应的类型!' },
            colSpan: 8,
            labelCol: { span: 8, offset: 0 },
            wrapperCol: { span: 16, offset: 0 }
          },
          props: { // 微件的配置属性
            'placeholder': '请输入'
          },
          // 侦听依赖集中放在此字段中设置
          listeners: [
            {
              watch: ['allowCustom', 'slotType'],
              // 逻辑运算符：||（或），&&（与），!（非）
              condition: [
                {
                  fieldName: 'allowCustom',
                  value: true,
                  operator: '===',
                  connector: '||'
                },
                {
                  fieldName: 'slotType',
                  value: 'undefined', // 代表空
                  operator: '!==',
                  connector: '||'
                }
              ],
                // "allowCustom.value = true || slotType.value != ''", // value 代表监听字段的值
              set: { // 设置当前schema对象的值
                status: 'edit' // 解析为 当前schema对象 status = edit
              }
            }
          ],
          index: 4 // 该字段所在索引
        }
      ]
    }
  ]

  return (
    <div className="box">
      <FormDemo></FormDemo>
      <SchemaFormReader
        schemaArr={schemaArr}
        cRef={parentFormRef}
        formInitialValues={formInitialValues}
      />

    <Form.Provider
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      onFormFinish={(name, { values, forms }) => {
      }}
    >
      <Collapse>
          <Panel key={uuid(5)} header="test">
            <Form></Form>
        </Panel>
      </Collapse>
    </Form.Provider>

    </div>
  )
}

export default index
